<template>
	<view class="contents">
		<view class="items" v-for="(item,index) in menuList" :key="index" @click="gotoPage(item)">
			<image :src="item.icon" mode="aspectFit" v-if='!item.hidden' style="width: 150upx;height: 150upx;margin-bottom: 20upx;"></image>
			{{item.name}}
		</view>
		<view class="bottoms">
			<view class="items_nav active" @click="goHome">
				<image src="../../static/menu1.png" mode="aspectFill" style="width: 44upx;height: 44upx;"></image>
			</view>
			<view class="items_nav" @click="goMine">
				<image src="../../static/mine.png" mode="aspectFill" style="width: 44upx;height: 44upx;"></image>
			</view>
		</view>
	</view>
</template>

<script>
import {menuList} from './menu.js'
	export default {
		data() {
			return {
				menuList:[
					{
						path:'/pages/index/index',
						hidden:false,
						icon:require('@/static/home5.png'),
						name:'GPT聊天'
					}
				],
			};
		},
		onLoad() {
			// this.getData()
		},
		methods:{
			getData(){
				
			},
			gotoPage(item){
				uni.navigateTo({
					url:item.path
				})
			},
			goHome(){
				uni.reLaunch({
					url:'/pages/home/home'
				})
			},
			goMine(){
				uni.reLaunch({
					url:'/pages/mine/mine'
				})
			}
		},
		
	}
</script>

<style lang="scss">
	.contents{
		.items{
			width: 325upx;
			height: 325upx;
			background: #1e1e1e;
			border-radius: 20upx;
			margin: 10upx;
			float: left;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-flow: column;
			color: #ffffff;
		}
		.bottoms{
			width: 240upx;
			height: 80upx;
			border-radius: 40upx;
			position: fixed;
			bottom: 100upx;
			left: 230upx;
			z-index: 99;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #111111;
			overflow: hidden;
			.items_nav{
				width: 120upx;
				display: flex;
				justify-content: center;
				height: 80upx;
				align-items: center;
			}
			.active{
				background: #333333;
			}
		}
	}
</style>
